<template>
  <page-detail>
    <view class="container">
      <ne-swiper carousel-type="5" />
      <van-row :gutter="20">
        <van-col span="12">
          <serve-menu-card title="托管中心" icon="tg.png" url="2##6" />
        </van-col>
        <van-col span="12">
          <serve-menu-card
            title="达人资讯库"
            icon="dr.png"
            background="#80BF85"
            url="/pages/zhfw/doctorResource"
          />
        </van-col>
      </van-row>
      <view class="section">
        <ne-title title="课程介绍" />
        <ne-tabs
          :tabs="tabs1"
          style="margin-bottom: 14px"
          @change="statusChange"
          :allowUse="allowUse"
        />
        <!-- 报名中的课程 -->
        <course-card
          v-for="item in dataSource"
          :key="item.indexCode"
          :row="item"
          :queryType="queryType"
          @success="search"
        />
        <van-empty v-if="!dataSource.length" description="暂无数据" />
      </view>
    </view>
    <template #footer>
      <van-button
        type="primary"
        round
        v-if="userInfo.userRole.includes('1') || userInfo.userRole.includes('2') || userInfo.userRole.includes('3') || userInfo.userRole.includes('5')"

        style="width: 200px"
        @click="$toPage('/pages/zhfw/courseSubmit')"
        >发起课程</van-button
      >
    </template>
  </page-detail>
</template>

<script>
import NeTitle from '../../components/NeTitle.vue'
import ServeMenuCard from './components/ServeMenuCard.vue'
import CourseCard from './components/CourseCard.vue'
import NeSwiper from '../../components/NeSwiper.vue'
import hospitalsCard from './components/hospitalsCard.vue'
import pagingMixin from '../../mixins/pagingMixin'
import NeTabs from '../../components/NeTabs.vue'
import { mapGetters } from 'vuex'
import { tbExternalLinkList } from '../../api/tbExternalLink'
import { searchApprovalstatus } from '../../api/tbMoralEducation'
import { signInStatus } from '../../api/flow'
export default {
  name: 'wx_pages_zhfw_communityTeach',
  components: {
    NeTabs,
    hospitalsCard,
    NeSwiper,
    ServeMenuCard,
    NeTitle,
    CourseCard,
  },
  mixins: [pagingMixin],
  data() {
    return {
      url: '',
      tabs1: [
        {
          name: '全部活动',
          value: '',
        },
        {
          name: '我已报名',
          value: '1',
        },
        {
          name: '我发起的',
          value: '2',
        },
      ],
      educationList: [],
      restfulApi: '/tbCourse/page',
      queryType: '',
    }
  },
  onPullDownRefresh() {
    this.search({ approvalStatus: '1' })
  },
  onLoad() {
    this.linkSearch()
    this.search({ approvalStatus: '1' })
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    async afterHandleData(res) {
      const list = res.data.list

      // 创建所有请求的 Promise 数组
      const requestPromises = list.map((item) => {
        const params = {
          indexCode: item.indexCode,
          userId: this.userInfo.userId,
        }

        // 并行请求签到状态和报名状态
        return Promise.all([
          signInStatus(params),
          searchApprovalstatus(params),
        ]).then(([signRes, approvalRes]) => {
          item.isSign = signRes.data
          item.isBM = approvalRes.data
          return item
        })
      })

      // 等待所有请求完成
      await Promise.all(requestPromises)

      res.data.list = list
      return res
    },
    statusChange(index) {
      this.queryType = this.tabs1[index].value
      let formData = {
        queryType: this.queryType,
        approvalStatus: '1',
      }
      if (this.queryType) {
        formData.currentUserId = this.userInfo.userId
      }
      this.search(formData)
    },
    async linkSearch() {
      let res = await tbExternalLinkList({ linkType: '2', linkSubType: '10' })
      if (res.data && res.data.length > 0) {
        this.url = `/pages/share/qrcode?link=${res.data[0].linkUrl}&qrcode=${res.data[0].linkQrCode}`
      }
    },
  },
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #ffffff;
  padding: 12px;
  overflow: auto;
}

/* Banner */
.banner {
  width: 100%;
  height: 180px;
  background-color: #0052d9;
}

/* 法治讲堂 */
.section {
  margin-top: 20 rpx;
}

.section-title {
  font-size: 34 rpx;
  color: $uni-color-primary;
  font-weight: 500;
  margin: 20 rpx 0;
  display: inline-block;
}

.article-list {
  display: flex;
  flex-direction: column;
  gap: 20 rpx;
}
</style>
